import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:netease_music/models/banner_item.dart';
import 'package:netease_music/models/recommend_mv_item.dart';
import 'package:netease_music/models/recommend_play_list_item.dart';
import 'package:netease_music/pages/home/discover/recommend/bannerCarousel/index.dart';
import 'package:netease_music/pages/home/discover/recommend/navBar/index.dart';
import 'package:netease_music/pages/home/discover/recommend/recommendMv/index.dart';
import 'package:netease_music/pages/home/discover/recommend/recommendPlayList/index.dart';
import 'package:netease_music/theme/custom_colors.dart';
import 'package:netease_music/utils/mock_api.dart';

// 统一请求获取第一轮数据 及 骨架屏展示
class Recommend extends StatefulWidget {
  const Recommend({super.key});

  @override
  State<Recommend> createState() => _RecommendState();
}

class _RecommendState extends State<Recommend> {
  bool isLoading = true;
  List<BannerItem> bannerList = [];
  List<RecommendPlayListItem> recommentList = [];
  List<RecommendMvItem> recommentMvList = [];
  @override
  void initState() {
    super.initState();
    _fetchData();
  }

  Future<void> _fetchData() async {
    try {
      // 发送多个请求
      final responses = await Future.wait([
        MockApi.fetchBanner(),
        MockApi.fetchRecommendPlayList(),
        MockApi.fetchRecommendMvList(),
      ]);
      final bannerResponse = responses[0];
      final recommendPlay = responses[1];
      final recommendMV = responses[2];
      List<BannerItem> banner = parseCarouselItems(bannerResponse);
      List<RecommendPlayListItem> play =
          parseRecommendPlayListItem(recommendPlay);

      List<RecommendMvItem> mv = parseRecommendMvItem(recommendMV);
      setState(() {
        bannerList = banner;
        recommentList = play;
        recommentMvList = mv;
      });
    } catch (e) {
      // 错误处理（可展示错误 UI）
      isLoading = false;
    }
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: CustomScrollView(
        physics: const BouncingScrollPhysics(), // 有回弹效果
        slivers: [
          SliverToBoxAdapter(
            child: BannerCarousel(
              bannerList: bannerList,
            ),
          ),
          const SliverToBoxAdapter(
            child: NavBar(),
          ),
          SliverToBoxAdapter(
            child: RecommendPlayList(
              recommentList: recommentList,
            ),
          ),
          SliverToBoxAdapter(
            child: RecommendMv(
              recommentMvList: recommentMvList,
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              padding: const EdgeInsets.only(top: 12),
              decoration: BoxDecoration(
                border: Border(
                  top: BorderSide(
                    width: 1,
                    color: Theme.of(context)
                        .extension<CustomColors>()!
                        .borderColor,
                  ),
                ),
              ),
              child: GestureDetector(
                onTap: () {
                  Get.toNamed('/changeColumn');
                },
                child: Column(
                  children: [
                    Text(
                      '现在可以根据个人喜好,自由调整首页栏目顺序啦~',
                      style: Theme.of(context).textTheme.bodyMedium,
                    ),
                    Container(
                      margin: const EdgeInsets.only(
                        top: 12,
                        bottom: 24,
                      ),
                      padding: const EdgeInsets.symmetric(
                        vertical: 4,
                        horizontal: 12,
                      ),
                      decoration: BoxDecoration(
                        border: Border.all(
                          width: 1,
                          color: Theme.of(context).primaryColor,
                        ),
                        borderRadius: BorderRadius.circular(4),
                      ),
                      child: Text(
                        '调整栏目顺序',
                        style: TextStyle(
                          color: Theme.of(context).primaryColor,
                          fontSize: 12,
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}
